var croppable = false;
var fileName = null;
//判断是否为图片
function isImageFile(file) {
    if (file.type) {
        return /^image\/\w+$/.test(file.type);
    } else {
        return /\.(jpg|jpeg|png|gif)$/.test(file);
    }
}
// 获取头图
function getUrl(t,fil) {
	console.log(fil);
	if(fil[0]){
		if(!isImageFile(fil[0])){
			alert('只允许上传图片');
			return;
		}
		if(fil[0].size >= 5*1048576){
			alert('图片大小超过5M');
			return;
		}
		var url = window.URL || window.webkitURL;
        var img = new Image();              //手动创建一个Image对象
        img.src = url.createObjectURL(fil[0]);//创建Image的对象的url
        img.onload = function () {
        	if (img.width < 562 || img.height < 245) {
        		alert('请上传宽度不小于562，高度不小于245的图片');
    			return;
        	}else{
        		fileName = fil[0].name;
        		//裁剪框		
        	    var options = {
        	        aspectRatio: 3.64,
        	        viewMode : 0,//显示
        	        dragMode : "move",
        	        background : true,// 容器是否显示网格背景
        	        movable : false,//是否能移动图片
        	        cropBoxMovable :true,//是否允许拖动裁剪框
        	        cropBoxResizable :true,//是否允许拖动 改变裁剪框大小
        	        zoomOnWheel:false,
        	        zoomable:false,
        	        ready:function(){
        	        	croppable=true;
        	        }
        	    };  
        	    var Cnv = document.getElementById('myCanvas');
        	    var Cntx = Cnv.getContext('2d');//获取2d编辑容器
        	    var agoimg = document.getElementById("headImg");	   
        	    for (var intI = 0; intI < fil.length; intI++) {
        	        var tmpFile = fil[intI];
        	        var reader = new FileReader();
        	        reader.crossOrigin = "Anonymous";
        	        reader.readAsDataURL(tmpFile);
        	        reader.onload = function (e) {
        	            url = e.target.result;
        	            agoimg.src=url;
        	            
        	            var $img=$("#headImg");
        	            $img.css("height","332px");
        	            $img.cropper(options);
        	            $img.cropper('setData',{});
        	        	}  
        	    	}
        	    $(".headImgBox").show();   
        	}
        }
	}	
//可重复上传同一张图
		fileName = fil[0].name;
		$('#pic').val(fileName);
		var _thisFile='<input type="file" id="pic" onchange="getUrl(this,this.files);">';
		if(!!window.ActiveXObject || "ActiveXObject" in window){
		    t.removeNode(true);
		}else{
			t.remove();
		}
		$(".getPic label").prepend( _thisFile);

}

//上传头图
function uploadHeadImg(croppedCanvas) {
	$(".loadBox").show();
	$(".headImgBox").hide();
	croppedCanvas.toBlob(function(blob){
		var formData=new FormData();
	    formData.append('fileObject',blob,fileName);
	    var xhr = new XMLHttpRequest();
	    //上传中设置上传的百分比
	    xhr.upload.addEventListener("progress", function(evt){
	        if (evt.lengthComputable) {
	         	$(".loadBox .loadProgress .loading").css({"width": "0%"});
	            var percentComplete = Math.round(evt.loaded * 100 / evt.total);
	            $(".loadBox .percent").html(percentComplete+"%");
	            $(".loadBox .loadProgress .loading").css({"width": percentComplete+"%"});
	        }else {
	        	 $(".loadBox .percent").html("无法计算");
	        }
	    }, false);
	    //请求完成后执行的操作
	    xhr.addEventListener("load", function(xhr){
	    	var obj=xhr.currentTarget;
	        if(obj.status == '200'){
	        	$(".loadBox").hide(100);
	        	var t= JSON.parse(obj.response);
	        	if(t.msg=="上传成功"){
                    $("#headImg").cropper('destroy');
                    $('#headImg').src='';
                    $('#listImg').val(t.newFileName);
                    document.getElementById('newImg').setAttribute('src',t.url+t.newFileName);                 
                }
	        }
	    }, false);
	    //请求error
	    xhr.addEventListener("error", uploadFailed, false);
	    //发送请求
	    xhr.open("POST", "/travel/headImg/ajax");
	    xhr.send(formData);
	});
}
//如果失败
function uploadFailed(err) {
    flag = true;
}
//获取头图 取消
$(".headImgBox .cancel").click(function(){
	$("#headImg").cropper('destroy');
	$('#headImg').attr('src','');
    $(".headImgBox").hide();
});
//获取头图 确定
$(".headImgBox .sure").click(function(){
	var flag = true;
	var croppedCanvas = $("#headImg").cropper('getCroppedCanvas');
    if (!croppable) {
    	$("#headImg").cropper('destroy');
    	$('#headImg').attr('src','');
    	return;
    }
    uploadHeadImg(croppedCanvas); 
});
 

 
 

 
 

  
	 
	 
